<template>
    <div class="hosiptal">
        <!-- 头部 -->
        <div class="header">
            <div><i class="iconfont icon-User"></i>上海市</div>
            <div>医疗救治定点医院和发热门诊一览</div>
        </div>

        <!-- 搜索框 -->
        <div style="margin-top:160px;width:180px">
            <el-input
                placeholder="请输入医院名称"
                v-model="obj.name"
                clearable>
            </el-input>
        </div>

        <!-- 医院信息 -->
        <div>
            <div class='item' v-for='(item,index) in hospitals' :key="item.id">
                <div class="left">
                    <div class='title'>
                        <div>{{index + 1}}</div>
                        <div>{{item.name}}</div>
                    </div>
                    <div class="tag">
                        <span>{{item.flags}}</span>
                    </div>
                    <div class='location'>{{item.province}} {{item.city}} {{item.area}}</div>
                </div>
                <div class="right">
                    <div style='padding-left:15px;'><i class='iconfont icon-weizhi'></i></div>
                    <div>2000M</div>
                </div>
            </div>
        </div>

        <!-- 分页按钮 -->
        <el-pagination
            layout="prev, pager, next"
            :current-page='obj.page'
            :page-size='obj.pageSize'
            @current-change='chagePage'
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
import axios from '@/http/axios'
export default {
    data(){
        return {
            input:'',
            obj:{
                page:1,
                pageSize:5
            },
            hospitals:[],
            total:0
        }
    },
    created(){
        this.findAllHospital()
    },
    watch: {
        obj:{
            handler:function(){
                this.findAllHospital()
            },
            deep:true
        }
    },
    methods:{
        // 页码改变事件
        chagePage(page){
            this.obj.page = page;
        },
        // 查询所有的医院
        findAllHospital(){
            axios({
                url:'http://39.96.21.48:8001/hospital/pageQuery',
                method:'get',
                params:this.obj
            }).then((res)=>{
                this.hospitals = res.data.data.list
                this.total = res.data.data.total
            })
        }
    }
}
</script>

<style scoped>
    .location {
        color:rgb(153, 153, 153);
        font-size: 14px;
    }
    .tag span {
        border-radius: 4px;
        padding:2px 5px;
        font-size:14px;
        color: white;
        background-color: rgb(255,179,78);
    }
    .title div:first-child {
        background-color:white;
        border-radius:100%;
        height: 30px;
        width:30px;
        line-height:30px;
        text-align: center;
        margin-right:10px;
    }
    .right div {
        height: 45px;
        line-height:45px;
    }
    .left div {
        height: 30px;
        line-height: 30px;
    }
    .title {
        overflow: hidden;
    }
    .title div {
        float: left;
    }
    .left {
        float: left;
    }
    .right {
        float:right;
    }
    .item {
        /* 清除浮动，也就是将原本失去的高度加回来 */
        overflow: hidden;
        background-color:#ededed;
        padding:10px;
        border-radius:5px;
        margin-top: 20px;
    }
    /* 字体图标库 */
    .icon-User {
        font-size:30px;
        /* color:black; */
    }
    .header {
        height: 150px;
        /* 背景图片 */
        background-image:url('http://121.199.29.84/visual/static/img/bg1.efce26ef.png');
        /* 将图片紧贴着外层div */
        position: absolute;
        top:0;
        left:0;
        right:0;
        /* 字体样式 */
        color:white;
        font-weight:800;
        font-size:28px;
        padding:40px 20px;
    }
</style>